<template>
  <div class="category-page">
    <header>
      <span>分类</span>
    </header>
    <main>
      <div class="title">
        <van-sidebar v-model="active" @change="handleChange">
          <van-sidebar-item v-for="(item, index) in showList" :key="index" :title="item.name" />
        </van-sidebar>
      </div>
      <div class="content">
        <div v-if="ishas">
          <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false"
            @load="onLoad">
            <van-card v-for="item in cartList" :key="item.id" :price="formatMoney(item.price_low) + '起'"
              :desc="'2023.' + (item.end_time + '&nbsp;' + item.district_name + '&nbsp;' + item.venue_name)"
              :title="item.project_name" :thumb="baseURL + item.cover" @click-thumb="jumpToDetail(item.id)">
              <template #bottom>
                <span>{{ item.required_number }}人想去</span>
              </template>
              <template #num>
                <van-icon name="shopping-cart-o" color="#fa541c" size="24" @click="handleAddToCart(item)" />
              </template>
            </van-card>
          </van-list>
        </div>
        <div v-else class="no-show">
          <p>
            暂时没有演出数据
          </p>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup  >
import { getCityListApi, getShowListApi } from '../../apis/homeApi'
import { onMounted, ref } from 'vue'
import useCartStore from '../../store/cart'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'
import { baseURL } from '../../apis/Ajax'

const showList = ref([])
const active = ref('')
const cartList = ref([])
const store = useCartStore()
const loading = ref(false)
const finished = ref(false)
let ishas = ref(true)
let city = ref('')
const router = useRouter()

/**
 * 分类切换数据
 * @param {number} index 分类数据下标
 */
async function handleChange(index) {
  cartList.value = []
  // 如果是第一项则是查询全部数据
  if (index == 0) {
    async function getList() {
      await getShowListApi({ page: 1, size: 50 }).then(d => {
        if (d.code === 200) {
          ishas.value = true
          cartList.value = d.data.rows
          console.log(showList.value)
          console.log(d)
        }
      })
    }
    getList()
    return
  }
  const { name } = showList.value[index]
  city.value = name
  console.log(name)
  // 查询分类数据
  await getShowListApi({ page: 1, size: 20, name }).then(d => {
    if (d.code === 200) {
      console.log(d)
      if (d.data.rows.length == 0) {
        ishas.value = false
      } else {
        ishas.value = true
        cartList.value = d.data.rows
      }
    }
  })
}

/**
 * 格式化商品金额
 * @param {number} val 
 */
function formatMoney (val){
  return Number(val / 100).toFixed(2)
}

/**
 * 获取分类城市列表数据
 */
onMounted(async function () {
  await getCityListApi().then(d => {
    if (d.code === 200) {
      showList.value = d.data.filter((_, index) => index < 51)
      showList.value.unshift({ name: '全部' })
      console.log(showList.value)
      console.log(d)
    }
  })
})
/**
 * 获取演出列表数据
 */
onMounted(async function () {
  await getShowListApi({ page: 1, size: 50 }).then(d => {
    if (d.code === 200) {
      cartList.value = d.data.rows
      console.log(showList.value)
      console.log(d)
    }
  })

})

/**
 * 加入购物车
 */
function handleAddToCart(item) {
  let { id, price_low, venue_name, cover, project_name
  } = item
  price_low = formatMoney(price_low)
  console.log(price_low)
  const currentProduct = {
    id,
    project_name,
    cover,
    venue_name,
    price_low,
    amount: 1,
    checked: false,
  }
  store.addToCart(currentProduct)
  Toast.success('加入购物车成功!')
}

/**
 * 触底加载更多
 */
const onLoad = async () => {
  loading.value = true
  await getShowListApi({ page: 2, size: 50 ,name:city.value}).then(d => {
    if (d.code === 200) {
      cartList.value.push(...d.data.rows)
      loading.value = false
      finished.value = true
    }
  })
}

/**
 * 跳转到详情页
 * @param {string} id 
 */
 function jumpToDetail(id) {
  router.push({
    path: '/detail',
    query: {
      id
    }
  })
}

</script>

<style  scoped   lang="less">
@import '../../style/common.less';

.category-page {
  display: block;
  position: relative;
  height: 100%;

  >header {
    background-image: linear-gradient(to top, @c02, @c05);
    height: 48px;
    line-height: 48px;
    color: @g00;
    font-size: .9rem;
    text-align: center;
  }

  >main {
    display: flex;
    height: calc(100% - 48px);
    width: 100%;
    overflow: hidden;

    .title {
      // width: 80px;
      flex: 0 0 80px;
      overflow-y: auto;
    }

    .content {
      flex: 0 0 300px;
      overflow-y: auto;

      .no-show {
        width: 100%;
        height: 48px;
        line-height: 48px;
        color: @g05;
        text-align: center;
        font-size: 14px;
      }
    }
  }
}
</style>
